import { message, Modal, Select, Table } from "antd";
import { connect } from "dva";
import moment from "moment";
import React from "react";
import styles from "./index.less";

const { Option } = Select;

@connect((state) => ({
  theme: state.theme,
  currentUser: state.user.currentUser,
}))
export default class RiskStatusModal extends React.PureComponent {
  state = {
    tableLoading: false,
    pageData: {},
    tableData: [],
  };

  componentDidMount() {
    this.handleTableData();
  }

  // handleSubmit = (msg) => {
  //   const { changeriskStatusModalVisible } = this.props;

  //   // TODO:请求接口

  //   changeriskStatusModalVisible(true);
  // };

  handleTableData = () => {
    const { riskvin } = this.props;
    this.setState({
      tableLoading: true,
    });
    this.props.dispatch({
      type: "http2/postFetchPage",
      payload: {
        url: `/mscreditvehicle/current/tbox/log?vin=${riskvin}`,
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          this.setState({
            pageData: response.data,
          });
          this.changData();
        } else {
          message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };
  changData = () => {
    const { pageData } = this.state;
    const tableDataList = [
      {
        key: "1",
        responseData: pageData.riskExecuteTime,
        operand: "云端",
        operationType: "创建配置指令",
        instruct: pageData.riskStatus,
      },
    ];
    if (pageData.requestData != null) {
      tableDataList.push({
        key: "2",
        responseData: pageData.requestTime,
        operand: "实车TBOX",
        operationType: "点火请求配置",
        instruct: pageData.requestData,
      });
    }
    if (pageData.responseData != null) {
      tableDataList.push({
        key: "3",
        responseData: pageData.requestTime,
        operand: "云端",
        operationType: "下发配置指令",
        instruct: pageData.responseData,
      });
    }
    if (pageData.ackResult != null) {
      tableDataList.push({
        key: "4",
        responseData: pageData.ackTime,
        operand: "实车TBOX",
        operationType: "反馈配置结果",
        instruct: pageData.ackResult,
      });
    }
    this.setState({
      tableData: tableDataList,
    });
  };
  render() {
    const { tableData, tableLoading } = this.state;

    const { changeriskStatusModalVisible } = this.props;

    const columns = [
      {
        title: "操作时间",
        dataIndex: "responseData",
        render: (text) => {
          return moment(text).format("YYYY-MM-DD HH:mm:ss");
        },
      },
      {
        title: "操作对象",
        dataIndex: "operand",
      },
      { title: "操作类型", dataIndex: "operationType" },
      {
        title: "配置指令",
        dataIndex: "instruct",
        render: (text, record) => {
          if (record.operationType == "创建配置指令") {
            if (record.instruct == "LOCK") {
              return "锁车";
            } else if (record.instruct == "LIMP") {
              return "跛行";
            } else if (record.instruct == "UNLOCK") {
              return "解除锁车";
            } else if (record.instruct == "UNLIMP") {
              return "解除跛行";
            }
          } else {
            if (record.instruct == "0") {
              return "正常行驶";
            } else if (record.instruct == "1") {
              return "锁车";
            } else if (record.instruct == "2") {
              return "跛行";
            }
          }
        },
      },
    ];

    const tableProps = {
      columns,
      size: "small",
      // pagination,
      rowKey: "sid",
      scroll: { x: "max-content" },
      loading: tableLoading,
      dataSource: tableData,
      // onChange: (pagination) => {
      //   this.setState(
      //     {
      //       curPage: pagination.current,
      //       pageSize: pagination.pageSize,
      //     },
      //     // () => {
      //       // this.handleTableData();
      //     // }
      //   );
      // },
    };

    return (
      <Modal
        title="云端与实车TBOX配置指令执行日志"
        onCancel={() => changeriskStatusModalVisible(false)}
        visible={true}
        footer={[]}
        width="770px"
      >
        <div className={styles.exportTaskModal}>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    );
  }
}
